import React from 'react';
import Topics from "./Topics";
import { Pagination } from 'antd';
import {getTopics,fetchTop10} from '../../services/cnode';
// import './antd.css';
import classNames from "classnames";

export class Main extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            page: 1,
            pageSize: 10,
            topics: [],
            tab: 'all',
        }
    }
    componentDidMount() {
        fetchTop10().then(data => {
            this.setState({
                topics: data
            });
        });
    }
    render() {
        const {topics} = this.state;
        return (
            <div className={classNames("inner no-padding")}>
                <Topics topics={topics} changeTab={this.changeTab}/>
                <Pagination defaultCurrent={1} total={500} onChange={this.onChange}/>
            </div>
        );
    }

    changeTab = (tab) => {
        const {page, pageSize} = this.state;
        if (tab) {
            this.setState({
                tab: tab
            });
            this.onChange(page, pageSize, tab);
        }
    }

    onChange = (pageNumber, limit, tab)=> {
        const {page, pageSize} = this.state;
        getTopics({page:pageNumber || page, limit:pageSize, tab: tab}).then(data =>{
            this.setState({
                page: pageNumber,
                topics: data
            });
        });
    }
}
